import { Key, useEffect, useState } from "react";
import { useModel, useProTable, useModal, useForm } from '@sker/sdk'
import { SysAttachmentCategory } from '@sker/model'
import { Button, Card, Modal, Popconfirm } from "antd";
import { PlusOutlined } from '@ant-design/icons'
import { ProTable } from "@ant-design/pro-components";
import { BetaSchemaForm } from "@ant-design/pro-form";
export const AttachmentCategorySelector: React.FC<{ multi?: boolean, value?: Key[], onSelect?: (record: string[]) => void }> = ({ multi, value, onSelect }) => {
    const model = useModel(SysAttachmentCategory)
    const { props: proTableProps, actionRef, onChange } = useProTable(multi ? 'checkbox' : 'radio', value);
    const [editRecord, setEditRecord] = useState<any>()
    const { props: modalProps, setOpen } = useModal(`添加图标分组`);
    const { props: formProps, form } = useForm([
        { title: '分组名', dataIndex: 'title', formItemProps: { rules: [{ required: true, message: '分组名必填' }] } },
        { title: '英文名', dataIndex: 'name', tooltip: '唯一', formItemProps: { rules: [{ required: true, message: '英文名必填' }] } },
        { title: '宽度', dataIndex: 'width', tooltip: '不填为任意' },
        { title: '高度', dataIndex: 'height', tooltip: '不填为任意' },
    ], async (values) => {
        await model.create(values, ['id'])
        actionRef.current?.reload();
        setEditRecord(null);
        setOpen(false)
    })
    onChange((keys, rows) => {
        onSelect(keys)
    })
    useEffect(() => {
        form.setFieldsValue(editRecord)
    }, [editRecord])
    return <>
        <Modal {...modalProps}>
            <BetaSchemaForm {...formProps} />
        </Modal>
        <Card title={'分组列表'} extra={
            <Button type={'primary'} icon={<PlusOutlined />} size={'small'} onClick={e => setOpen(true)}></Button>
        }>
            <ProTable
                {...proTableProps}
                rowKey={record => record.id}
                columns={[
                    { title: '分组名', dataIndex: 'title' },
                    {
                        title: '操作',
                        hideInSearch: true,
                        align: 'right',
                        render: (dom, entity, index, action, schema) => {
                            return <>
                                <Button size={'small'} type={'link'} onClick={e => {
                                    setOpen(true)
                                    setEditRecord(entity)
                                }}>编辑</Button>
                                <Popconfirm onConfirm={async e => {
                                    await model.delete(entity.id)
                                    await actionRef.current?.reload();
                                }} title={'此操作不可逆!您确定要执行此操作吗？'} description={'删除后无法恢复，请慎重操作！！'}>
                                    <Button size={'small'} type={'link'} danger >删除</Button>
                                </Popconfirm>
                            </>
                        }
                    }
                ]}
                request={async () => {
                    return model.find(['id', 'title', 'name'], [], [
                        { field: 'create_date', order: 'desc' },
                    ])
                }}
            />
        </Card>
    </>
}
